import React, { Component } from 'react'
import { FooterTab } from '../common'

export default class MicroDisc extends Component {
  render() {
    return (
      <div className={`rt-micro-disc-container`}>
        <div className={`rt-account-info-box`}>
          <div className={`cm-avatar-circle rt-adjust`}></div>
          <div>
            <img alt="auth" src={require('static/images/auth.png')} />
            <span className={`rt-nickname`}>vp2016</span>
          </div>
        </div>

        <div className={`rt-deposite-withdraw-box`}>
          <div>
            <i className={`iconfont icon-question`} />
            <span>充值</span>
          </div>

          <div>
            <i className={`iconfont icon-question`} />
            <span>提现</span>
          </div>
        </div>

        <div className={`rt-notice-box`}>
          <span>公告</span>
          <span>关于开通借记卡支付通道的通知</span>
        </div>

        <div className={`rt-available-goods-box`}>
          <div className={`rt-active-goods`}>
            <span>工业银</span>
            <span>3503</span>
            <i className={`iconfont icon-question`} />
          </div>

          <div>
            <span>工业油</span>
            <span>3503</span>
            <i className={`iconfont icon-question`} />
          </div>
        </div>

        <div className={`rt-price-statistics-box`}>
          <span>昨收：3491</span>
          <span>开盘：3499</span>
          <span>最高：3520</span>
          <span>最低：3479</span>
        </div>

        <div className={`rt-chart-genre-box`}>
          <span>分时线</span>
          <span>5分钟线</span>
          <span>30分钟线</span>
          <span>1小时线</span>
          <span className={`rt-genre-active`}>日线</span>
        </div>

        <img className={`rt-chart-img`} src={require('static/images/chart.png')} alt="chart" />

        <div className={`rt-btn-grp-box`}>
          <div>
            <i className={`iconfont icon-question`} />
            <span>买涨</span>
          </div>

          <div>
            <i className={`iconfont icon-question`} />
            <span>买跌</span>
          </div>
        </div>

        <div className={`rt-in-process-order`}>正在交易的订单</div>

        <div className={`rt-order-box`}>
          <span className={`rt-up`}>涨</span>

          <div className={`rt-limit-stop`}>
            <img alt="ls" src={require('static/images/shield.png')} />
            <span>止盈损</span>
          </div>

          <div className={`rt-goods`}>
            <span>3KG 工业银</span>
            <span>开仓价 3433</span>
          </div>

          <span className={`rt-number-visible`}>+24.00</span>

          <span className={`rt-btn`}>平仓</span>
        </div>

        <div className={`rt-order-box`}>
          <span className={`rt-up rt-down`}>跌</span>

          <div className={`rt-limit-stop rt-limit-stop-grey`}>
            <img alt="ls-grey" src={require('static/images/shield-grey.png')} />
            <span>止盈损</span>
          </div>

          <div className={`rt-goods`}>
            <span>3KG 工业银</span>
            <span>开仓价 3433</span>
          </div>

          <span className={`rt-number-visible rt-another-state`}>+24.00</span>

          <span className={`rt-btn`}>平仓</span>
        </div>

        <div className={`rt-order-box`}>
          <span className={`rt-up`}>涨</span>

          <div className={`rt-limit-stop`}>
            <img alt="ls" src={require('static/images/shield.png')} />
            <span>止盈损</span>
          </div>

          <div className={`rt-goods`}>
            <span>3KG 工业银</span>
            <span>开仓价 3433</span>
          </div>

          <span className={`rt-number-visible`}>+24.00</span>

          <span className={`rt-btn`}>平仓</span>
        </div>

        <div className={`rt-order-box`}>
          <span className={`rt-up rt-down`}>跌</span>

          <div className={`rt-limit-stop rt-limit-stop-grey`}>
            <img alt="ls-grey" src={require('static/images/shield-grey.png')} />
            <span>止盈损</span>
          </div>

          <div className={`rt-goods`}>
            <span>3KG 工业银</span>
            <span>开仓价 3433</span>
          </div>

          <span className={`rt-number-visible rt-another-state`}>+24.00</span>

          <span className={`rt-btn`}>平仓</span>
        </div>

        <div className={`rt-order-box`}>
          <span className={`rt-up`}>涨</span>

          <div className={`rt-limit-stop`}>
            <img alt="ls" src={require('static/images/shield.png')} />
            <span>止盈损</span>
          </div>

          <div className={`rt-goods`}>
            <span>3KG 工业银</span>
            <span>开仓价 3433</span>
          </div>

          <span className={`rt-number-visible`}>+24.00</span>

          <span className={`rt-btn`}>平仓</span>
        </div>

        <div className={`rt-order-box`}>
          <span className={`rt-up rt-down`}>跌</span>

          <div className={`rt-limit-stop rt-limit-stop-grey`}>
            <img alt="ls-grey" src={require('static/images/shield-grey.png')} />
            <span>止盈损</span>
          </div>

          <div className={`rt-goods`}>
            <span>3KG 工业银</span>
            <span>开仓价 3433</span>
          </div>

          <span className={`rt-number-visible rt-another-state`}>+24.00</span>

          <span className={`rt-btn`}>平仓</span>
        </div>

        <div className={`rt-order-box`}>
          <span className={`rt-up rt-down`}>跌</span>

          <div className={`rt-limit-stop rt-limit-stop-grey`}>
            <img alt="ls-grey" src={require('static/images/shield-grey.png')} />
            <span>止盈损</span>
          </div>

          <div className={`rt-goods`}>
            <span>3KG 工业银</span>
            <span>开仓价 3433</span>
          </div>

          <span className={`rt-number-visible rt-another-state`}>+24.00</span>

          <span className={`rt-btn`}>平仓</span>
        </div>

        <div className={`rt-order-box`}>
          <span className={`rt-up rt-down`}>跌</span>

          <div className={`rt-limit-stop rt-limit-stop-grey`}>
            <img alt="ls-grey" src={require('static/images/shield-grey.png')} />
            <span>止盈损</span>
          </div>

          <div className={`rt-goods`}>
            <span>3KG 工业银</span>
            <span>开仓价 3433</span>
          </div>

          <span className={`rt-number-visible rt-another-state`}>+24.00</span>

          <span className={`rt-btn`}>平仓</span>
        </div>

        <div className={`rt-order-box`}>
          <span className={`rt-up rt-down`}>跌</span>

          <div className={`rt-limit-stop rt-limit-stop-grey`}>
            <img alt="ls-grey" src={require('static/images/shield-grey.png')} />
            <span>止盈损</span>
          </div>

          <div className={`rt-goods`}>
            <span>3KG 工业银</span>
            <span>开仓价 3433</span>
          </div>

          <span className={`rt-number-visible rt-another-state`}>+24.00</span>

          <span className={`rt-btn`}>平仓</span>
        </div>

        <FooterTab defaultActiveIndex={0} />
      </div>
    )
  }
}